<template>
    <div class="select-label-wrap">
        <el-row type="flex" class="label-data-wrap">
            <el-col :span="8">
                <ul class="label-type-list">
                    <template v-for="(item, index) in labelData" >
                        <li class="label-type-item" v-if="item.nodes" :key="index" :class="{'active': selectLabelType === index}" @click="changeLabelType(index)">
                            {{ item.name }}
                        </li>
                    </template>
                </ul>
            </el-col>
            <el-col :span="16">
                <div class="label-item-list">
                    <template v-if="labelData[selectLabelType] && labelData[selectLabelType].nodes">
                        <el-tag class="label-item" v-for="(item, index) in labelData[selectLabelType].nodes.split(',')" :key="index" :class="{'active': isSelected(item)}" @click="handelClickLabel(item)">{{ item }}</el-tag>
                    </template>
                </div>
            </el-col>
        </el-row>
        <!-- 选中的结果 -->
        <div class="select-result">
            <el-tag
                class="select-label-item"
                :key="tag"
                v-for="tag in selectLabel"
                closable
                :disable-transitions="false"
                effect="dark"
                @close="deleteSelectLabel(tag)">
                {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
        </div>
        <!-- 提示 -->
        <p class="tips">当前共包含标签{{ selectLabel.length }}个，标签要求不超过{{ limit }}个</p>
    </div>
</template>
<script>
import { getDictByCode } from '@/api/dic'

export default {
    name: 'SelectLabel',
    props: {
        // 标签最大限制
        limit: {
            type: Number,
            default () {
                return 5;
            }
        },
        selectVal: {
            type: String,
            default () {
                return '';
            }
        }
    },
    data() {
        return {
            labelData: [], // 标签数据
            selectLabelType: 0, // 选中的标签类别
            selectLabel: [], // 选中的标签
            inputVisible: false,
            inputValue: ''
        }
    },
    created() {
        this.getData()
    },
    methods: {
        // 获取标签数据
        getData() {
            let that = this
            let arr = []
            getDictByCode({code: 77}).then((res)=>{
                if(res.status === 200) {
                    for(let i=0, len=res.data.dictValueObj.length; i < len; i++) {
                        arr.push(JSON.parse(res.data.dictValueObj[i].dictValue))
                    }
                    that.labelData = arr
                }
            })
        },
        // 切换标签大类
        changeLabelType(index) {
            this.selectLabelType = index
        },
        // 选择标签
        handelClickLabel(text) {
            let that = this
            if(!that.isSelected(text)) {
                // 判断已选的标签数量
                if(that.selectLabel.length >= that.limit) {
                    that.$message.warning(`标签不能超过${that.limit}个`)
                    return flase
                } else {
                    that.selectLabel.push(text)
                }
            }
        },
        // 判断当前标签是否被选中
        isSelected(text) {
            if(this.selectLabel.indexOf(text) >= 0) {
                return true
            } else {
                return false
            }
        },
        // 删除标签
        deleteSelectLabel(tag) {
            this.selectLabel.splice(this.selectLabel.indexOf(tag), 1)
        },
        showInput() {
            if(this.selectLabel.length < this.limit) {
                this.inputVisible = true
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus()
                })
            } else {
                this.$message.warning(`标签不能超过${this.limit}个`)
                return flase
            }
        },
        // 动态添加标签
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.selectLabel.push(inputValue)
            }
            this.inputVisible = false
            this.inputValue = ''
        },
        // 获取选择的标签
        getSelectLabel() {
            return this.selectLabel || []
        }
    },
    watch: {
        selectVal(val, oldVal) {
            if(val) {
                this.selectLabel = val.split(',')
            }
        }
    }
}
</script>
<style lang="scss">
.select-label-wrap {
    .tips {
        margin-top: 10px;
        font-size: 12px;
    }
    .label-data-wrap {
        border: 1px solid #DCDFE6;
        width: 100%;
        height: 312px;
        .label-type-list {
            height: 100%;
            overflow: auto;
            list-style: none;
            .label-type-item {
                margin-bottom: 5px;
                background-color: #DCDFE6;
                height: 40px;
                line-height: 40px;
                text-align: center;
                cursor: pointer;
                &:hover,
                &.active {
                    background: #efefef;
                }
                &:last-child {
                    margin-bottom: 0px;
                }
            }
        }
        .label-item-list {
            padding: 10px;
            .label-item {
                margin: 5px;
                cursor: pointer;
                &:hover,
                &.active {
                    color: #fff;
                    background-color: #409eff;
                    border-color: #409eff;
                }
            }
        }
    }
    .select-result {
        margin-top: 10px;
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
        .select-label-item {
            margin-right: 10px;
        }
    }
}
</style>
